<template>
  <div id="app">
    <!-- <keep-alive> -->
    <router-view></router-view>
    <!-- </keep-alive> -->
    <div class="navigation" v-show="isShow">
      <NavigationBar id="navigation_bar" ref="navigation_bar"></NavigationBar>
      <div class="chunk" :style="{ height: chunkHeight + 'px' }"></div>
    </div>
  </div>
</template>
<script>
import eventBus from './common/event-bus'
import navPath from "@/common/appNavPath"
import NavigationBar from "@/components/NavigationBar.vue"
export default {
  name: "App",
  components: {
    NavigationBar,
  },
  data() {
    return {
      chunkHeight: 0,
      isShow: true,
    }
  },
  created() {

  },
  mounted() {
    this.chunkHeight = document.querySelector("#navigation_bar").clientHeight;
    localStorage.setItem("chunkHeight", this.chunkHeight)
    const windowHeight = document.documentElement.clientHeight;
    // const windowHeight = window.screen.height;
    localStorage.setItem("windowHeight", windowHeight);
    /* App.vue 第一次进行不会触发,因为没人触发 */
    eventBus.$on("switchPage", (path) => { //router index.js
      this.changeNavBar(path)
    })
    /* 所以这里手动触发一下 */
    this.changeNavBar(window.location.pathname)
    eventBus.$emit("correctPath", window.location.pathname);//NavigationBar.vue
  },
  methods: {
    changeNavBar(path) {
      const flag = navPath.find(item => item == path);
      this.isShow = flag ? true : false;
    }
  }
}
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  user-select: none;
  box-sizing: border-box;
}

span {
  display: inline-block;
}

.bg {
  background-color: #f7f7f7;
}

.b {
  margin-bottom: 10px;
}

.l {
  margin-left: 10px;
}

.f12 {
  font-size: 12px;
}

.f14 {
  font-size: 14px;
}

.f15 {
  font-size: 15px;
}

.bold {
  font-weight: bold;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grey {
  color: #939393;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: textfield;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
